<template>
  <a-modal :zIndex="999"
    :bodyStyle="{ background: ' linear-gradient(to bottom, rgb(222, 234, 255), rgb(222, 235, 254))' }"
    v-model:visible="state.visible" width="450px" centered :footer="null" :closable="SyncModalInfo.openType == 'batch' && !state.syncLoading" :maskClosable="false"
    style="border-radius: 15px;overflow: hidden;">
    <!-- 开始同步 -->
    <div class="start_sync" v-if="state.showStartSync" :style="{
  height: SyncModalInfo.openType === 'batch' && !state.syncLoading ? '200px' : '300px',
    marginTop: SyncModalInfo.openType === 'batch' && !state.syncLoading ? '30px' : '0'
    }">
      <div class="top_img" v-if="SyncModalInfo.openType == 'batch' && state.syncLoading || SyncModalInfo.openType == 'single'">
        <img src="../../components/dialogComponent/img/loading.gif" alt="">
      </div>
      <div class="desc">将同步【{{ SyncModalInfo?.nickname }}】下，所有授权托管的子账号至{{ state?.appName }}平台</div>
      <div class="desc_tips">同步完成后，子账号可以进行成片发布</div>
      <div class="actions">
        <a-button class="submit_btn" style="color: #fff;" @click="startSyncHandle" :loading="state.syncLoading">{{
          SyncModalInfo?.startBtnText }}</a-button>
      </div>
    </div>
    <!-- 同步完成 -->
    <div class="end_sync" v-if="state.showEndSync">
      <div class="top_progress">
        <a-progress type="circle" :percent="100" :width="140" :stroke-color="{
          '0%': 'rgb(91, 194, 232)',
          '50%': 'rgb(117, 111, 252)',
          '100%': 'rgb(101, 116, 243)',
        }">
          <template #format="percent">
            <div class="circle_tip">
              <span class="count">{{ SyncModalInfo?.sync_processed_num }}</span>
              <span class="text">已同步</span>
            </div>
          </template>
        </a-progress>
      </div>
      <div class="ok_desc">同步完成</div>
      <div class="actions">
        <a-button class="submit_btn" style="color: #fff;" @click="closeEndSyncFn">完成</a-button>
      </div>
    </div>
  </a-modal>

</template>

<script setup>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import request from "@/common/utils/request";
import { error } from "jquery";
import { pad } from "lodash";
import store from "@/store/index";

const emit = defineEmits(["update", 'updateCount']);
const props = defineProps({
  syncModalInfo: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const state = reactive({
  visible: false,
  showStartSync: false,
  showEndSync: false,
  appName: '',//平台名称
  syncLoading: false,
});


onMounted(()=>{
  store.dispatch("getAiConfig").then((aiConfig) => {
    state.appName = aiConfig.site_name
  })
})

const showModal = () => {
  state.visible = true;
};
const showStartSyncFn = () => {
  state.showStartSync = true;
};
const closeStartSyncFn = () => {
  state.showStartSync = false;
};
const showEndSyncFn = () => {
  state.showEndSync = true;
};
const closeEndSyncFn = () => {
  state.showEndSync = false;
  closeStartSyncFn()
  closeModal()
  SyncModalInfo.value = {}
  emit('update')
};
const closeModal = () => {
  state.visible = false;
  SyncModalInfo.value = {}
};
const SyncModalInfo = computed(() => {
  return props.syncModalInfo
})
const startSyncHandle = () => {
  if (props.syncModalInfo.task_id) {
    SyncModalInfo.value.showImgLoading = true
    state.syncLoading = true
    let timerId = setInterval(() => {
      request.get("/work_ai", "/user/socialMedia/douyin/process", { key: props.syncModalInfo.task_id }).then(successRes => {
        console.log(successRes)
        if (successRes.result.status == 'done') {
          SyncModalInfo.value.sync_processed_num = successRes?.result?.sync_processed_num
          clearInterval(timerId)
          closeStartSyncFn()
          showEndSyncFn()
          state.syncLoading = false
        }
      }).catch(error => {
        clearInterval(timerId)
        closeStartSyncFn()
        closeModal()
        closeEndSyncFn()
        state.syncLoading = false
        SyncModalInfo.value = {}
      })
    }, 1000)
  }
}
defineExpose({
  showModal,
  closeModal,
  showStartSyncFn,
  showEndSyncFn,
  closeStartSyncFn,
  closeEndSyncFn,
  SyncModalInfo,
  startSyncHandle
})
</script>

<style lang="less" scoped>
.start_sync,
.end_sync {
  height: 300px;

  .top_img {
    // width: 80px;
    height: 80px;
    text-align: center;

    img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }
  }

  .desc {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }

  .desc_tips {
    margin-top: 30px;
    font-size: 16px;
    text-align: center;
    color: #7f92a3;
  }

  .actions {
    margin-top: 30px;
    text-align: center;

    .submit_btn {
      background: linear-gradient(to right, rgb(101, 212, 240), rgb(52, 144, 253), rgb(135, 100, 254));
      color: fff;
      border-radius: 10px;
      width: 180px;
      height: 40px;
    }
  }
}

.end_sync {
  .top_progress {
    margin-top: 20px;
    text-align: center;
  }

  .ok_desc {
    text-align: center;
    margin-top: 30px;
    font-size: 20px;
  }

  .circle_tip {
    display: flex;
    flex-direction: column;

    .count {
      color: black;
      font-weight: 600;
      // font-size: 20px;
    }

    .text {
      margin-top: 10px;
      font-size: 14px;
      color: rgb(94, 100, 120);
    }
  }
}
</style>